<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员榜单</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h2>会员榜单</h2>
    <div class="RankingList-topOneItem-jjeYt">
        <div class="RankingList-background-dUQNA">
            <div class="RankingList-title-qhXL3">高能量青年养成记：10个心理工具送给开学的你</div>
            <div class="RankingList-description-dVQaM">你的痛苦，有「药」可医。</div>
            <div class="RankingList-author-dk4vg">
                <div class="Image-module-imageWrapper-fVufG RankingList-avatar-kcJPz">
                    <div style="width: 360px; padding-top: 100%;"></div>
                    <img class="Image-module-image-uorig" src="./img/avator.jpg">
                </div>
                <div>作者: 熊七夕</div>
            </div>
        </div>
        <div class="SkuAvatar-root-io2qQ RankingList-artwork-xv8ph">
            <div class="Image-module-imageWrapper-fVufG SkuAvatar-artwork-bkoSQ">
                <img class="SkuAvatar-artwork-bkoSQ" src="./img/bg.png" width="100" height="133">
                <img class="Image-module-image-uorig" src="./img/user.jpg">
            </div>
            <div class="CellLabel-type-gEnY9 CellLabel-newUI-kMrGd SkuAvatar-label-tUg8Z SkuAvatar-bigLabel-qUrPi">
                <span class="VerticalMiddle-root-gCE8x">盐选专栏</span>
            </div>
            <img src="./img/vip.png" class="SkuAvatar-vipTag-ebBN5">
        </div>
        <div class="RankingList-indexLogo-aV61x">01</div>
    </div>
    <h2>单个模块</h2>
    <div class="RankingList-skuItem-iDCBE">
        <div class="RankingList-background-dUQNA"></div>
        <div class="RankingList-itemIndex-dC66L">04</div>
        <div class="SkuAvatar-root-io2qQ RankingList-artwork-xv8ph">
            <div class="Image-module-imageWrapper-fVufG SkuAvatar-artwork-bkoSQ">
                <img class="SkuAvatar-artwork-bkoSQ" src="./img/bg.png">
                <img class="Image-module-image-uorig" src="./img/user.jpg">
            </div>
            <div class="CellLabel-type-gEnY9 CellLabel-newUI-kMrGd SkuAvatar-label-tUg8Z"><span
                    class="VerticalMiddle-root-gCE8x">盐选专栏</span></div>
            <img src="./img/vip.png" class="SkuAvatar-vipTag-ebBN5">
        </div>
        <div class="RankingList-title-qhXL3">高能量青年养成记：10个心理工具送给开学的你</div>
        <div class="RankingList-description-dVQaM">你的痛苦，有「药」可医。</div>
        <div class="RankingList-author-dk4vg">
            <div class="Image-module-imageWrapper-fVufG RankingList-avatar-kcJPz">
                <img class="Image-module-image-uorig" src="./img/avator.jpg">
            </div>
            <div>作者: 熊七夕</div>
        </div>
    </div>
    <h2>个人中心模块</h2>
    <div class="MemberInfoPanel-root-sy3XP">
        <div class="MemberInfoPanel-info-x6X35">
            <div class="Image-module-imageWrapper-fVufG MemberInfoPanel-avatar-uAYNV">
                <div style="width: 229px; padding-top: 100%;"></div>
                <img class="Image-module-image-uorig" src="./img/mz.jpg">
            </div>
            <div class="MemberInfoPanel-userName-vctAu">牧泽</div>
            <div class="MemberInfoPanel-vipTip-tRtDA"><span>新会员首月仅 9 元</span>
                <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" height="15" width="15" fill="currentColor"
                    class="MemberInfoPanel-arrowIcon-bRjZy">
                    <path
                        d="M19.608 11.291a1.04 1.04 0 0 0-1.428-.02l-1.88 1.782a.968.968 0 0 0-.02 1.388l9.49 9.556-9.49 9.555a.973.973 0 0 0 .02 1.388l1.88 1.782a1.036 1.036 0 0 0 1.428-.02L31.703 24.7a.991.991 0 0 0 0-1.404L19.608 11.29z"
                        fill-rule="evenodd"></path>
                </svg>
            </div>
            <div class="MemberInfoPanel-memberBtn-xkU3p">立即开通</div>
        </div>
        <div class="Image-module-imageWrapper-fVufG MemberInfoPanel-vipRight-wAfiN">
            <div style="width: 280px; padding-top: 40.3571%;"></div>
            <img class="Image-module-image-uorig" src="./img/qy.png">
        </div>
    </div>
</body>

</html>